<template>
    <transition name="el-fade-in-linear">
    <div v-show="show" class="backimg-style">
        <div class="circleBox">
            <div class="myCircleLeft"></div>
            <div class="myCircleRight"></div>
        </div>
        <div class="login-area">
            <h1>
                <p class="cn">交付资产库信息查询系统</p>
                <p class="en">Delivery asset library information query system</p>
            </h1>

            <div  class="entry">
                <h2>用户登录 LOGIN</h2>
                <div class="cont">
                    <div class="login-i user"><input class="login-inp"  type="text" placeholder="请输入账号" ref="accountName"/></div>

                    <div class="login-i password"><input class="login-inp"  type="password" placeholder="请输入密码" ref="passWord"/></div>
                </div>
                <button class="enterBtnLogin" @keyup.enter="enter()" @click="enter()">登录</button>
            </div>

        </div>
        <div class="login-copyright">版权所有   东软集团股份有限公司</div>
    </div>
    </transition>
</template>

<script>

    import urlConfig from '../../config/url.json';
    import commonCodeList from '../../util/commonCodeList/commonCodeList';



    export default {
        data(){
            return{
                // boxshow:false,
                show: true,
                loginError:''
            }
        },
        created: function() {
            var that = this;
            document.onkeydown = function(event) {
                let key = window.event.keyCode;
                if (key == 13) {
                    that.enter();
                }
            }
        },
        methods:{
            enter(){
                let that = this;
                that.boxshow = false;
                if (that.$refs["accountName"].value==''){
                    that.$message.error('用户名不能为空');

                }
                else if (that.$refs['passWord'].value==''){
                    that.$message.error('密码不能为空');
                }
                else {
                    this.$http({
                            method: 'get',
                            url: urlConfig.oauthToken,
                            baseURL:"/api",
                            params:{
                                "accountname": this.$refs.accountName.value,
                                "password": this.$refs.passWord.value,
                            }
                        }
                    ).then(function(response){
                        if (response.data.msg==null){
                            that.STORAGE.setItem("loginData",JSON.stringify(response.data));
                            that.STORAGE.setItem("loginTime",JSON.stringify({"loginTime":new Date().getTime()}));
                            that.$router.push("/mainPage/welcome");
                        }else{
                            that.$message.error(response.data.msg);
                            that.$refs['passWord'].value='';
                            that.$refs['accountName'].value='';
                        }
                    })
                }
            },

        },
    }
</script>

<style>
    .circleBox {
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        overflow: hidden;
    }

    .myCircleLeft {
        position: absolute;
        top:-200px;
        left: -150px;
        width: 800px;
        height: 800px;
        border-radius: 50%;
        background: -webkit-linear-gradient(left top, #2FB2B8 , #CCFFFF);
        animation:myfirstOne 3s linear infinite alternate ;
        z-index: 8;
    }

    .myCircleRight {
        position: absolute;
        bottom:-400px;
        right: -50px;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: -webkit-linear-gradient(right bottom, #2FB2B8 , #CCFFFF);
        animation:myfirstTwo 4s linear infinite alternate ;
        z-index: 9;
    }

    @keyframes myfirstOne {
        0%   { width:800px; height: 800px;opacity:1;}
        100% { width:850px; height: 850px;opacity:0.3;}
    }

    @keyframes myfirstTwo {
        0%   { width:500px; height: 500px;opacity:0.3;}
        100% { width:600px; height: 600px;opacity:1;}
    }
    .backimg-style {
        /*background-image: url("../../../resources/assets/login/login-bg.jpg");*/
        background-size: cover;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-area {
        background-image: url("../../../resources/assets/login/entry-bg.png");
        background-size: cover;
        width: 1102px;
        height: 600px;
        position: relative;
        z-index: 10;
    }

    .login-area h1 {
        position: absolute;
        left: 100px;
        top: 95px;
        height: 75px;
        width: 480px;
        padding-left: 100px;
        background-image: url("../../../resources/assets/login/cc.png");
        background-repeat: no-repeat;
        /*background-size: 100px 100px;*/
    }

    .login-area h1 .cn {
        font-size: 28px;
        font-weight: 600;
        color: #333;
        line-height: 50px;
        font-family: Helvetica;
    }

    .login-area h1 .en {
        font-size: 13px;
        font-weight: 200;
        color: #69abb2;
        text-transform: uppercase;
        line-height: 20px;
        font-family: Verdana;
    }

    .entry {
        /* display: -webkit-box; */
        position: absolute;
        /* float: right; */
        /* right: 20px; */
        left: 600px;
        top: 50px;
        width: 400px;
        height: 450px;
        padding: 0px 40px;
    }

    .login-area .entry h2 {
        color: #fff;
        font-size: 22px;
        height: 50px;
        line-height: 50px;
        padding-top: 40px;
    }

    .error {
        position: absolute;
        top: 120px;
        width: 370px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.3);
        color: #ff7575;
        font-size: 14px;
        line-height: 50px;
        border-radius: 8px;
        text-align: center;
    }

    .cont {
        position: absolute;
        top: 190px;
    }

    .enterBtnLogin {
        position: absolute;
        bottom: 0px;
        height: 60px;
        width: 370px;
        margin-top: 30px;
        background-color: #fff;
        font-size: 18px;
        color: #2eb3b9;
        border-radius: 8px;
        border: 0px;
        outline: none;
        cursor: pointer;
    }
    .enterBtnLogin:hover{
        background:rgba(255,255,255,.8);
    }

    .login-copyright {
        position: absolute;
        bottom: 0px;
        height: 60px;
        width: 100%;
        text-align: center;
        font-size: 14px;
        line-height: 60px;
        color: #aaa;
    }

    .user {
        background-image: url("../../../resources/assets/login/user.png");
        background-repeat: no-repeat;
        background-position: 10px center;
        outline: none;
    }

    .password {
        background-image: url("../../../resources/assets/login/password.png");
        background-repeat: no-repeat;
        background-position: 10px center;
        outline: none;
    }

    .login-i {
        padding-left: 60px;
        border: none;
        background-color: transparent;
        border-bottom: 1px solid #5fd4da;
        font-size: 18px;
        color: #acfff2;
    }

    .login-inp {
        height: 66px;
        width: 310px;
        border: none;
        background-color: transparent;
        font-size: 18px;
        color: #acfff2;
    }

    input::-webkit-input-placeholder {
        color: #acfff2;
    }

    .errorBox-enter-active, .errorBox-leave-active {
        transition: opacity .5s;
    }
    .errorBox-enter, .errorBox-leave-to {
        opacity: 0;
    }


    input:-webkit-autofill {
        -webkit-text-fill-color: #acfff2 !important;
        transition: background-color 5000s ease-in-out 0s;
        caret-color: #acfff2;
    }

    input:focus { outline: none; }

</style>